<template>
  <div class="userCard">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="name"><span class="type">{{visitor.isInsure===1?'医保':'自费'}}</span>{{visitor.name}}</span>
          <div>
            <el-button class="button" type="primary" :icon="Edit" circle  @click="editHandler"></el-button>
            <el-popconfirm title="确定要删除吗？" @confirm="deleteHandler">
              <template #reference>
                <el-button v-if="isDelButton" class="button" type="danger" :icon="Delete" circle > </el-button>
              </template>
            </el-popconfirm>
          </div>

        </div>
      </template>
      <div class="content">
        <p>证件类型：{{visitor.param.certificatesTypeString}}</p>
        <p>证件号码：{{visitor.certificatesNo}}</p>
        <p>用户性别：{{visitor.sex ===0?'女':'男'}}</p>
        <p>出生日期：{{visitor.birthdate}}</p>
        <p>手机号码：{{visitor.phone}}</p>
        <p>婚姻状况：{{visitor.isMarry===0?'未婚':'已婚'}}</p>
        <p>当前住址：{{visitor.param.cityString}}</p>
        <p>详细地址：{{visitor.param.fullAddress}}</p>
      </div>
      <div class="selectAct  animate__animated animate__fadeIn" v-show="currentIndex===flog" >已选择</div>
    </el-card>

  </div>

</template>

<script setup lang="ts">
import {Delete, Edit} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router";

let $route = useRoute()
let $router = useRouter();
let props = defineProps(['visitor','flog','currentIndex','isDelButton']);
let $emit = defineEmits(['changeScene','deletePatient']);

const editHandler = () => {
  if ($route.path == "/user/patient") {
    $emit("changeScene", props.visitor);
  } else {
    //路由跳转携带参数
    $router.push({ path: "/user/patient", query: { type: "edit", id: props.visitor.id } });
  }
}
const deleteHandler = () => {
  $emit('deletePatient', props.visitor.id);
}
</script>

<style scoped lang="less">
.userCard {
  position: relative;
  margin: 5px;
  width: 32%;
  :deep(.el-card__header){
    background: #e5e5e5;
    height: 60px;
    .card-header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        display: flex;
        align-items: center;
        font-size: 16px;
        .type {
          background: white;
          padding: 5px;
          font-size: 12px;
          margin-right: 5px;
          border-radius: 10px;
        }
      }

    }

  }
  .content {
    p {
      line-height: 40px;
    }
  }

  .selectAct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(35deg);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: red 1px dashed;
    text-align: center;
    line-height: 200px;
    opacity: 0.5;
    color: red;
    font-weight: 900;
  }
}

</style>